<template>
    <div id="canvasbox"></div>
</template>
<script>
import G6 from '@antv/g6';
import stepCreateNodes from './data';
export default {
    name:'G6Box',
    data(){
        return{
            graph:null,
            graphData:null,
            hasShowNums:0,
            pageSize:10,
            width:0,
            height:0,
        }
    },
    props:{
        // width:{
        //     type:Number,
        //     require:true
        // },
        // height:{
        //     type:Number,
        //     require:true
        // }
    },
    mounted(){
    },
    beforeDestroy(){
        if(this.graph){
            this.graph.get('destroyed');
        }
    },
    methods:{
        initGraph(_data){
            this.width = document.body.clientWidth;
            this.height = document.body.clientHeight;
            this.graphData = _data;
            const vm = this;
            const grid = new G6.Grid();
            const menu = new G6.Menu({
                offsetX:   -20,
                offsetY:   -50,
                itemTypes: ['node', 'edge'],
                getContent(e) {
                    const outDiv = document.createElement('div');
                    outDiv.style.width = '80px';
                    outDiv.style.cursor = 'pointer';
                    outDiv.innerHTML = '<p id="deleteNode">删除节点</p>';
                    return outDiv;
                },
                handleMenuClick(target, item) {
                    const { id } = target;

                    if(id) {
                        vm[id](item);
                    }
                },
            });
            const minimap = new G6.Minimap({
                size: [140, 60],
            });
            this.graph = new G6.Graph({
                container: 'canvasbox', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
                width: this.width, // Number，必须，图的宽度
                height: this.height, // Number，必须，图的高度
                // renderer: 'svg',
                // layout: {
                // type: 'xxx', // 位置将固定
                // },
                // 所有节点默认配置
                defaultNode: {
                    type:  'rect-node',
                    style: {
                        // radius: 10,
                        // width:  100,
                        // height: 50,
                        cursor: 'move',
                        fill:   '#ecf3ff',
                    },
                    labelCfg: {
                        // fontSize: 20,
                        style:    {
                            cursor: 'move',
                        },
                    },
                },
                // 所有边的默认配置
                defaultEdge: {
                    type:  'polyline-edge', // 扩展了内置边, 有边的事件
                    style: {
                        radius:          5,
                        offset:          15,
                        stroke:          '#aab7c3',
                        lineAppendWidth: 10, // 防止线太细没法点中
                        // endArrow:        true,
                    },
                },
                // 覆盖全局样式
                nodeStateStyles: {
                    'nodeState:default': {
                        opacity: 1,
                    },
                    'nodeState:hover': {
                        opacity: 0.8,
                    },
                    'nodeState:selected': {
                        opacity: 0.9,
                    },
                },
                // 默认边不同状态下的样式集合
                edgeStateStyles: {
                    'edgeState:default': {
                        stroke: '#aab7c3',
                    },
                    'edgeState:selected': {
                        stroke: '#1890FF',
                    },
                    'edgeState:hover': {
                        animate:       true,
                        animationType: 'dash',
                        stroke:        '#1890FF',
                    },
                },
                modes: {
                // 支持的 behavior
                    default:    ['drag-canvas','zoom-canvas', 'drag-shadow-node', 'canvas-event', 'delete-item', 'select-node', 'hover-node', 'active-edge'],
                    originDrag: ['drag-canvas', 'drag-node', 'canvas-event', 'delete-item', 'select-node', 'hover-node', 'active-edge'],
                },
                plugins: [menu, minimap, grid],
            });
            // createNodes(width,height);
            let data = this.stepCreateNode();
            
            console.log(data)
            this.graph.data(data); // 加载数据
            this.graph.render(); // 渲染图
            let moveToX = this.width;
            let moveToY = this.height - 100;
            this.graph.zoomTo(3,{x:moveToX,y:moveToY});
            this.bindEventHandler();
            this.canvasResize();
        },
        getNeedShowDatas(){
            let startIndex = this.hasShowNums;
            let endIndex = this.hasShowNums + this.pageSize;
            let data = this.graphData.slice(startIndex,endIndex);
            return data;
        },
        stepCreateNode(){
            let NeedShowDatas = this.getNeedShowDatas();
            console.log('addDatas',NeedShowDatas)
            let data = stepCreateNodes(this.width,this.height,this.hasShowNums,NeedShowDatas);
            this.hasShowNums = NeedShowDatas.length;
            return data;
        },
        bindEventHandler(){
            this.graph.on('node:click',(ev)=>{
                let node = ev.item;
                console.log(node)
                if(node._cfg.id === 'time_h_10'){
                    let data = this.stepCreateNode();
                    let {nodes,edges} = data;
                    nodes.forEach((item)=>{
                        this.graph.addItem('node',item)
                    });
                    edges.forEach((item)=>{
                        this.graph.addItem('edge',item)
                    })
                    
                }
            })
        },
        canvasResize(){
            window.addEventListener('resize',()=>{
                if (!this.graph || this.graph.get('destroyed')) return;
                this.width = document.body.clientWidth;
                this.height = document.body.clientHeight;
                this.graph.changeSize(this.width,this.height)
            })
        }
    },
    watch:{}
}
</script>
<style lang="scss">
/* 提示框的样式 */
  .g6-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    font-size: 12px;
    color: #545454;
    border-radius: 4px;
    border: 1px solid #e2e2e2;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: rgb(174, 174, 174) 0 0 10px;
    padding: 10px 8px;
  }
  .g6-minimap{
    position: absolute;
    right: 0;
    bottom: 0;
    background:#fff;
  }
  .g6-minimap-container {
    border: 1px solid #e2e2e2;
  }
  .g6-minimap-viewport {
    border: 1px solid rgb(25, 128, 255);
    // height:100%!important;
    // width:20px!important;
  }
</style>